<template>
  <el-dialog
      top="10vh"
      width="1000px"
      title="管理参与竞标的供应商"
      :visible.sync="dialogValue"
      :close-on-click-modal="false"
      append-to-body
  >
    <div class="supplier-management">
      <div class="bidding-info">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="比价月份">{{ currentBidding?.month }}</el-descriptions-item>
          <el-descriptions-item label="比价标题">{{ currentBidding?.title }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="supplier-actions">
        <el-button type="primary" size="mini" @click="onAddSupplier">添加供应商</el-button>
      </div>

      <div class="supplier-list">
        <el-table
            size="large"
            stripe
            border
            v-loading="loading"
            :data="supplierData"
            row-key="id"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)"
        >
          <el-table-column prop="supplier.name" label="供应商名称" width="180"/>
          <el-table-column prop="supplier.contact_person" label="联系人" width="120"/>
          <el-table-column prop="supplier.phone" label="联系电话" width="150"/>
          <el-table-column prop="status" label="状态" width="120">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 1" type="info">待提交报价</el-tag>
              <el-tag v-if="scope.row.status === 2" type="warning">已提交报价</el-tag>
              <el-tag v-if="scope.row.status === 3" type="success">已入围</el-tag>
              <el-tag v-if="scope.row.status === 4" type="danger">未入围</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="update_time" label="报价提交时间" width="180">
            <template slot-scope="scope">
              <span v-if="scope.row.status > 1">{{ scope.row.update_time }}</span>
              <span v-else style="color: #999;">未提交</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" min-width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.remark">{{ scope.row.remark }}</span>
              <span v-else style="color: #999;">无</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="onImportQuote(scope.row)">导入报价</el-button>
              <el-button type="text" style="color: #F82222" @click="onRemoveSupplier(scope.row)" v-if="scope.row.status === 1">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 导入报价弹窗 -->
    <ImportQuote ref="importQuoteRef" @get-page="loadSupplierData" />

    <!-- 添加/编辑供应商弹窗 -->
    <el-dialog
        title="添加/编辑供应商"
        :visible.sync="supplierDialogVisible"
        width="500px"
        append-to-body
    >
      <el-form :model="supplierForm" :rules="supplierRules" ref="supplierForm" label-width="100px">
        <el-form-item label="供应商" prop="supplier_id">
          <el-select v-model="supplierForm.supplier_id" placeholder="请选择供应商" style="width: 100%">
            <el-option
                v-for="item in availableSuppliers"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="supplierForm.remark" type="textarea" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="supplierDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveSupplier">确定</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { http } from '@/api';
import ImportQuote from './importQuote';

export default {
  name: 'ManageSuppliers',
  components: {
    ImportQuote
  },
  data() {
    return {
      dialogValue: false,
      loading: false,
      supplierData: [],
      currentBidding: null,
      supplierDialogVisible: false,
      supplierForm: {
        supplier_id: '',
        remark: ''
      },
      supplierRules: {
        supplier_id: [
          { required: true, message: '请选择供应商', trigger: 'change' }
        ]
      },
      availableSuppliers: [],
      isEdit: false,
      editId: null
    };
  },
  methods: {
    open(bidding) {
      this.currentBidding = bidding;
      this.dialogValue = true;
      this.loadSupplierData();
      this.loadAvailableSuppliers();
    },
    loadSupplierData() {
      if (!this.currentBidding) return;

      this.loading = true;
      http.biddingSupplier.list({
        monthly_bidding_id: this.currentBidding.id
      }).then(res => {
        this.supplierData = res.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    loadAvailableSuppliers() {
      http.supplier.list().then(res => {
        this.availableSuppliers = res.data;
      });
    },
    onAddSupplier() {
      this.isEdit = false;
      this.editId = null;
      this.supplierForm = {
        supplier_id: '',
        remark: ''
      };
      this.supplierDialogVisible = true;
    },
    onEditSupplier(row) {
      this.isEdit = true;
      this.editId = row.id;
      this.supplierForm = {
        supplier_id: row.supplier_id,
        remark: row.remark || ''
      };
      this.supplierDialogVisible = true;
    },
    onRemoveSupplier(row) {
      this.$confirm('确定要移除该供应商吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        http.biddingSupplier.delete(row.id).then(() => {
          this.$message.success('移除成功');
          this.loadSupplierData();
        });
      });
    },
    onImportQuote(row) {
      this.$refs.importQuoteRef.open(row, this.currentBidding);
    },
    saveSupplier() {
      this.$refs.supplierForm.validate((valid) => {
        if (valid) {
          const data = {
            ...this.supplierForm,
            monthly_bidding_id: this.currentBidding.id
          };

          if (this.isEdit) {
            http.biddingSupplier.update(this.editId, data).then(() => {
              this.$message.success('更新成功');
              this.supplierDialogVisible = false;
              this.loadSupplierData();
            });
          } else {
            http.biddingSupplier.create(null, data).then(() => {
              this.$message.success('添加成功');
              this.supplierDialogVisible = false;
              this.loadSupplierData();
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.supplier-management {
  .bidding-info {
    margin-bottom: 20px;
  }

  .supplier-actions {
    margin-bottom: 15px;
  }

  .supplier-list {
    max-height: 500px;
    overflow-y: auto;
  }
}

.dialog-footer {
  text-align: right;
}
</style>
